<template>
  <!-- 一般情況下，class类名应与组件名匹配(建议，不强制要求)
         组件名：Person.vue   class类:  person
  组件名: MyTag.vue    class类:  my-tag-->
  <div class="person">
    <img :title="name" :src="avatar" width="100px">
    <span :title="name">{{name}}</span>
    <i class="el-icon-circle-close"
       @click="doClick"></i>
  </div>
</template>

<script>
export default {
  props: {
    avatar: {
      // 声明属性，指定需要显示的头像路径
      type: String,
      default: ""
    },
    name: {
      // 声明属性，指定需要显示的昵称
      type: String,
      default: "默认昵称"
    }
  },
  methods: {
    // 监听删除图标被点击
    doClick() {
      console.log('person clicked')
      // 在此发现用户点击了删除小图标，
      // 需要立即通知父组件，自定义事件：delete被触发
      // $emit()方法用于通知父组件自定义事件被触发
      // 参数  'delete'就是自定义事件的事件类型名称
      // 在父组件中，就可以通过 <person @delete=""></person>
      this.$emit('delete', {name: this.name})
    }
  },
};
</script>

<style lang="scss" scoped>           
.person {
  margin:5px;
  display: inline-block;
  width: 110px;
  padding: 5px;
  border: 1px solid #ccc;
  text-align: center;
  position: relative;
  transition: 0.3s;
}
.person span {
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.person:hover i {
  opacity: 1;
}
.person i {
  opacity: 0;
  transition: 0.3s;
  position: absolute;
  top: -10px;
  right: -10px;
  background: #fff;
  font-size: 20px;
}
.person img {
  transition: 0.3s;
}
.person:hover img {
  opacity: 0.5;
}
</style>